<template>
  <div class="index-container ec-container">

    <!-- 新老客户活跃数据 -->
    <el-row :gutter="10">
      <el-col :span="18" class="left-wrap">
        <div class="search-wrap">
          <div class="client-number">
            <span class="title">渠道：</span>
            <el-select v-model="channelValue" placeholder="请选择">
              <el-option
                v-for="item in channelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="client-number">
            <span class="title">平台：</span>
            <el-select v-model="platformValue" placeholder="请选择">
              <el-option
                v-for="item in platformOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="client-number">
            <span class="title">店铺名称：</span>
            <el-input class="w50" v-model="storeName"></el-input>
          </div>
        </div>
        <div class="top-wrap">
          <div class="client-number">
            <h2>销售额</h2>
            <h3>{{saleAmount}}</h3>
          </div>
          <div class="client-number">
            <h2>订单数</h2>
            <h3>{{orderNum}}</h3>
          </div>
          <div class="client-number">
            <h2>折扣率</h2>
            <h3>{{discount}}</h3>
          </div>
          <div class="client-number">
            <h2>笔单价</h2>
            <h3>{{pricePerCustomer}}</h3>
          </div>
        </div>

      </el-col>
      <el-col :span='6'>
        <div class="tips">
          <p>*销售相关时间口径：</p>
          <p>-线上取付款日期；</p>
          <p>-线下取下单日期；</p>
          <p>*数据统计时间：昨天；</p>
          <p>*页面数据计算时间：截至昨天凌晨；</p>
        </div>
      </el-col>
    </el-row>

    <!-- 销售结构  销售变化统计图 -->
    <el-row :gutter="10">
      <el-col :span="10">
        <div id="structure" class="grid-content"></div>
      </el-col>
      <el-col :span="14">
        <div id="change" class="grid-content"></div>
      </el-col>
    </el-row>

    <!-- 统计信息部分 -->
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="tips-wrap">
          <p>以下指标是截至昨天累计数据；</p>
          <P>*客户：所有有效成交客户数，包含活跃客户，活跃新客，活跃老客；</P>
          <p>*会员：已注册客户；</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="tips-wrap">
          <p>*活跃客户：近一年有有效购买的客户；</p>
          <P>*活跃新客：近一年有有效购买且第一次购买在近一年的客户；</P>
          <p>*活跃老客：近一年有有效购买，但一年前有购买记录的客户；</p>
        </div>
      </el-col>
    </el-row>

    <!-- 客户数 粉丝数  -->
    <el-row :gutter="10"  class="total">
      <el-col :span='4'>
        <div class="top-wrap">
          <div class="client-number">
            <h2>客户数</h2>
            <h3>{{customNow}}</h3>
          </div>
        </div>
      </el-col>
      <el-col :span='4'>
        <div class="top-wrap">
          <div class="client-number">
            <h2>粉丝数</h2>
            <h3>{{fansNow}}</h3>
          </div>
        </div>
      </el-col>
      <el-col :span='4'>
        <div class="top-wrap">
          <div class="client-number">
            <h2>会员数</h2>
            <h3>{{memberCount}}</h3>
          </div>
        </div>
      </el-col>
      <el-col :span='5'>
        <div class="top-wrap">
          <div class="client-number">
            <h2>活跃客户</h2>
            <h3>{{activeNow}}</h3>
          </div>
        </div>
      </el-col>
      <el-col :span='7'>

        <el-row :gutter="10" class="active">
          <div class="top-wrap">
            <div class="client-number">
              <h2>活跃老客</h2>
              <h3>{{oldMember}}</h3>
            </div>
          </div>
        </el-row>
        <el-row :gutter="10" class="active">
          <div class="top-wrap">
            <div class="client-number">
              <h2>活跃新客</h2>
              <h3>{{newMember}}</h3>
            </div>
          </div>
        </el-row>

      </el-col>
    </el-row>

    <!-- 各等级会员人数分布 -->
    <el-row :gutter="10">
      <el-col :span='12'>
        <div id="distribute" class="grid-content"></div>
      </el-col>
      <el-col :span='12'>
        <div id="active" class="grid-content"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      storeName: null,
      saleAmount:0,
      orderNum:0,
      discount:0,
      pricePerCustomer:0,
      //渠道下拉选项
      channelOptions: [
        {
          value: null,
          label: null,
        }
      ],

      //平台下拉选项
      platformOptions: [
        {
          value: null,
          label: null,
        }
      ],
      platformValue: '',
      merchantValue: '',
      channelValue: '',
      regionDataList:[],
      date30DaysList:[],
      saleAmount30DaysList:[],
      customNow: 0, //截止到当前的客户数
      fansNow: 0, //截止到当前的粉丝数
      activeNow:0,//活跃客户数
      memberCount:0,//会员数
      activeCustomData:{},//活跃新老客户占比数据
      newMember:0,//活跃新客户
      oldMember:0,//活跃老客户
      //会员数量统计:
      fansMemberNum:0,
      fansMemberPoint:0,
      normalMemberNum:0,
      normalMemberPoint:0,
      superDiamondMemberNum:0,
      superDiamondMemberPoint:0,
      diamondMemberNum:0,
      diamondMemberPoint:0,
    };
  },
  mounted() {
    this.change();
    this.distribute();

    this.listAllChannel();//获取所有的渠道信息
    this.listAllPlatform();//获取所有的平台信息
    this.getDataOfSaleInfo();//基本销售信息记录;
    this.getDataOfSaleArea();//销售区域统计;
    this.getDataOfLatest30Days();//获取最近30天的记录;
    this.getCustomNow();//加载截止到当前客户数
    this.getActiveCustomData();//加载活跃新老客户占比
    this.getDistributionOfMemberNumOfAllLevel();//个等级会员数量分布 - 饼状图
  },
  methods: {



    /**
     * 获取销售基本信息
     */
    getDataOfSaleInfo(){
      let this_ = this;
      let param = {
        channelId: this_.channelId,
        storeCode: this_.storeId,
        storeName: this_.storeName,
        platformCode: this_.platformId,
        status: 1,
        deleteFlag: 0,
        deptId: null,
        merchantId: null,
        id: null,
        stsDate: this_.stsDate,
        createTimeStart: null,
      };
      this.utils.request.getDataOfSaleInfo(param, res => {
        if (res !== null && res.code === '0000' && res.data !== null) {
          this.saleAmount = res.data.totalSaleAmount;
          this.orderNum = res.data.totalOrderQuantity;
          this.discount = res.data.discountRate;
          this.pricePerCustomer = res.data.customersUnitPrice;
        } else {
          this.$message({message: '没有获取到渠道信息', type: 'error'})
        }
      });
    },
    /**
     * 查询所有渠道接口，用作下拉框
     */
    listAllChannel(){
      let this_ = this;
      let param = {
        channelId: this_.channelId,
        storeId: this_.storeId,
        storeName: this_.storeName,
        platformId: this_.platformId,
        status: 1,
        deleteFlag: 0,
        deptId: null,
        merchantId: null,
        id: null,
        stsDate: this_.stsDate,
        createTimeStart: null,
      };
      this.utils.request.listAllChannel(param, res => {
        if (res !== null && res.code === '0000' && res.data !== null && res.data.length > 0) {
          this.channelOptions = res.data;
        } else {
          this.$message({message: '没有获取到渠道信息', type: 'error'})
        }
      });
    },
    /**
     * 查询所有渠道接口，用作下拉框
     */
    listAllPlatform(){
      let this_ = this;
      let param = {
        channelId: this_.channelId,
        storeId: this_.storeId,
        storeName: this_.storeName,
        platformId: this_.platformId,
        status: 1,
        deleteFlag: 0,
        deptId: null,
        merchantId: null,
        id: null,
        stsDate: this_.stsDate,
        createTime: null,
      };
      this.utils.request.listAllPlatform(param, res => {
        if (res !== null && res.code === '0000' && res.data !== null && res.data.length > 0) {
          this.platformOptions = res.data;
        } else {
          this.$message({message: '没有获取到平台信息', type: 'error'})
        }
      });
    },


    /**
     * 获取销售区域的数据 - 环形图
     */
    getDataOfSaleArea(){
      let this_ = this;
      let param = {
        channelId: this_.channelId,
        storeId: this_.storeId,
        storeName: this_.storeName,
        platformId: this_.platformId,
        status: 1,
        deleteFlag: 0,
        deptId: null,
        merchantId: null,
        id: null,
        stsDate: this_.stsDate,
        createTime: null,
      };
      this.utils.request.getDataOfSaleArea(param, res => {
        if (res !== null && res.code === '0000' && res.data !== null && res.data.length > 0) {
            let list = res.data;
            list.forEach(item =>{
              this.regionDataList.push({value:item.saleTotalAmount,name:item.regionName});
            });
          this.proportion();
        }
      });
    },

    /**
     * 查询所有渠道接口，用作下拉框
     */
    getDataOfLatest30Days(){
      let this_ = this;
      let param = {
        channelId: this_.channelId,
        storeId: this_.storeId,
        storeName: this_.storeName,
        platformId: this_.platformId,
        status: 1,
        deleteFlag: 0,
        deptId: null,
        merchantId: null,
        id: null,
        stsDate: this_.stsDate,
        createTime: null,
        pageIndex:1,
        pageSize:30,
      };
      this.utils.request.getDataOfLatest30Days(param, res => {
        if (res !== null && res.code === '0000' && res.data !== null && res.data.list !== null&& res.data.list.length > 0) {
            let list = res.data.list;
            list.forEach(item =>{
              this.date30DaysList.push(item.saleDate.substring(0,9));
              this.saleAmount30DaysList.push(item.saleTotalAmount);
            });
          this.change();
        }
      });
    },

    // 区域销售占比
    proportion() {
      let structure = document.getElementById("structure");
      let myChartChina = this.$echarts.init(structure);
      let option = {
        title: {
          text: "区域销售占比"
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          top: 40,
          data: ['会员', '非会员']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.regionDataList,
          }
        ]
      };
      myChartChina.setOption(option);
    },

    // 近30天销售变化
    change() {
      let change = document.getElementById("change");
      let myChartChina = this.$echarts.init(change);
      let option = {
        title: {
          text: "近30天销售变化"
        },
        xAxis: {
          type: 'category',
          data: this.date30DaysList,
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.saleAmount30DaysList,
          type: 'bar'
        }]
      };
      myChartChina.setOption(option);
    },

    // 各等级会员人数分布
    distribute() {
      let distribute = document.getElementById("distribute");
      let myChartChina = this.$echarts.init(distribute);
      let option = {
        title: {
          text: "各等级会员人数分布"
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 40,
          data: ['粉丝会员', '普通会员', '钻石会员I', '钻石会员II']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
               { value: this.fansMemberNum, name: "粉丝会员" },
              { value: this.normalMemberNum, name: "普通会员" },
              { value: this.diamondMemberNum, name: "demo钻石会员" },
              { value: this.superDiamondMemberNum, name: "demo钻石II会员" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChartChina.setOption(option);
    },

    // 活跃_新老客占比
    active(this_) {
      let active = document.getElementById("active");
      let myChartChina = this.$echarts.init(active);
      let option = {
        title: {
          text: "活跃_新老客占比"
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          top: 40,
          data: ['活跃新客', '活跃老客']
        },
        series: [
          {
            name: '客户类型',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
                show: false
            },
            data: this_.activeCustomData
          }
        ]
      };
      myChartChina.setOption(option);
    },
    //加载客户数
    getCustomNow(){
        let this_ = this;
        let params = this_.filter;
        this.utils.request.getCustomNow(params, function(res) {
          if (res.code == '0000') {
            this_.customNow = res.data.custom;
            this_.fansNow = res.data.fans;
            this_.activeNow=res.data.active;
            this_.newMember=res.data.oldMember;
            this_.oldMember=res.data.oldMember;
          }
        })
    },
    getCountOfMemberFun(){
        let this_ = this;
        let param = {
          channelId: this_.channelId,
          storeId: this_.storeId,
          storeName: this_.storeName,
          platformId: this_.platformId,
          status: 1,
          deleteFlag: 0,
          deptId: null,
          merchantId: null,
          id: null,
          stsDate: this_.stsDate,
          createTime: null,
        };
        this.utils.request.getCountOfMemberNum(param, res => {
          if (res !== null && res.code === '0000' && res.data !== null && res.data.memberNumber !== null) {
            this.memberCount = res.data.memberNumber;
          } else {
            this.$message({message: '没有获取到会员总人数', type: 'error'})
          }
        });
      },
       //加载活跃新老客户占比饼状图数据
      getActiveCustomData() {
        let this_ = this;
        this.utils.request.getActiveCustomData(this_.filter, function(res) {
          if (res.code == '0000') {
            console.log(res.data)
            this_.activeCustomData = res.data;
            this_.active(this_);
          }
        })
      },
      /**
     * 获取会员积分详情
     */
    getDistributionOfMemberNumOfAllLevel(){
      let this_ = this;
      let param = {
        channelId: this_.channelId,
        storeId: this_.storeId,
        storeName: this_.storeName,
        platformId: this_.platformId,
        status: 1,
        deleteFlag: 0,
        deptId: null,
        merchantId: null,
        id: null,
        stsDate: this_.stsDate,
        createTimeStart: null,
      };
      this_.utils.request.getDistributionOfMemberNumOfAllLevel(param, res => {
        if (res !== null && res.code === '0000' && res.data !== null && res.data.length > 0) {
            this_.tableData = res.data;
          let list = res.data;
          list.forEach(item => {
            if (item.levelId === 1) {
              this_.fansMemberNum = item.levelMemberNumber;
              this_.fansMemberPoint = item.levelAvailablePoints;
              this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
            }
            else if (item.levelId === 2) {
              this_.normalMemberNum = item.levelMemberNumber;
              this_.normalMemberPoint = item.levelAvailablePoints;
              this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
            }
            else if (item.levelId === 3) {
              this_.diamondMemberNum = item.levelMemberNumber;
              this_.diamondMemberPoint = item.levelAvailablePoints;
              this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
            }
            else if (item.levelId === 4) {
              this_.superDiamondMemberNum = item.levelMemberNumber;
              this_.superDiamondMemberPoint = item.levelAvailablePoints;
              this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
            }
          });
          this_.ranks();
          this_.grades();
          this_.points();
        } else {
          this_.$message({message: '没有获取到[会员积分详情]信息', type: 'error'})
        }
      });
    },

  }
};
</script>

<style scoped  lang="scss">
 @import "../../../assets/css/dataCenterEcharts.css";
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.ec-container {
  /* 左侧客户统计数量 */
  .left-wrap {
    padding-top: 10px;
    .top-wrap {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-around;
      .client-number {
        width: 24%;
        text-align: center;
        background-color: #fff;
        color: #333;
        margin-bottom: 10px;
      }
    }
    .search-wrap {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-around;
      .client-number {
        width: 32%;
        height: 70px;
        text-align: center;
        background-color: #fff;
        color: #333;
        margin-bottom: 10px;
        padding-top: 20px;
        .title {
          margin-right: 10px;
          font-weight: 500;
        }
      }
    }
  }
  .tips {
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
    p {
      line-height: 30px;
    }
  }
  .tips-wrap {
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
  }
  .total .client-number {
    background-color: #fff;
    padding: 20px;
    margin-top: 10px;
    text-align: center;
    color: #333;
  }
  .active .top-wrap .client-number{
    padding: 9px 0;
    margin-top: 10px;
    h2 {
      margin-block-start: 0;
      margin-block-end: 0;
    }
    h3 {
      margin-block-start: 0;
      margin-block-end: 0;
    }
  }
}
</style>
